<template>

 <div id="index">

 <ul>

 <li v-for="(item,index) of imgArr"><img :src="item" alt="图片描述"></li>

 </ul>

 </div>

</template>



<script>

  import Viewer from 'viewerjs';

  import 'viewerjs/dist/viewer.css';

  export default {

    name: 'HelloWorld',

    data() {

      return {

        imgArr: [

          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg',

          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg',

          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg'

        ]

      }

    },

    mounted() {

      const ViewerDom = document.getElementById('index');

      const viewer = new Viewer(ViewerDom, {

        // 相关配置项,详情见下面

      });

    }

  }

</script>





<style scoped>

  * {

    padding: 0;

    margin: 0;

  }





  ul {

    display: flex;

    flex-wrap: wrap;

  }





  ul li {

    width: 265px;

    height: 180px;

    list-style: none;

    border: 2px solid #CCC;

    border-radius: 3px;

    padding: 1px;

    margin: 10px;

    cursor: pointer;

  }





  ul li img {

    width: 100%;

    height: 100%;

  }

</style>
